<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr,th,td{
            /* border: 1px solid black; */
            padding: 10px;
        }
        #app table{
            margin-top:10px;
            border-collapse: collapse;
            text-align: center;
        }
        #bookStatusNavBar button{
            margin-left: 10px;
        }
        .bgcolor{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="bookStatusNavBar">
            <button v-for="(item,index) in booksStatus" :key="index" @click="currentStatus = item">{{item}}</button>
        </div>
        <table id="booksInfoTable">
            <thead>
                <tr>
                    <th v-for="(item,index) in tableNav" :key="index">{{item}}</th>	
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in filterBooksDates" :key="index" :class="{bgcolor:item.borrow}">
                    <td>{{item.name}}</td>
                    <td>{{item.author}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.press}}</td>
                    <td>
                        <span v-if="item.borrow" style="color: red;">已借出</span>
                        <span v-else>可借阅</span>
                    </td>
                    <td>
                        <button v-if="item.borrow" style="color: red;" @click="item.borrow = false">归还</button>
                        <button v-else @click="item.borrow = true">借阅</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:function(){
                return{
                    tableNav:["书籍名称","书籍作者","书籍价格","出版社","状态","操作"],
                    booksInfoDate:[
                        {name:"aaaa",author:"aaaa",price:10,press:"aaaa",borrow:false},
                        {name:"bbbb",author:"bbbb",price:10,press:"bbbb",borrow:true},
                        {name:"bbbb",author:"bbbb",price:10,press:"bbbb",borrow:true},
                        {name:"bbbb",author:"bbbb",price:10,press:"bbbb",borrow:true},
                        {name:"bbbb",author:"bbbb",price:10,press:"bbbb",borrow:false},
                        {name:"bbbb",author:"bbbb",price:10,press:"bbbb",borrow:true},
                        {name:"bbbb",author:"bbbb",price:10,press:"bbbb",borrow:false}
                    ],
                    booksStatus:["所有书籍","已借出书籍","可借阅书籍"],
                    currentStatus:"所有书籍",
                }
            },
            computed:{
                filterBooksDates(){
                    switch(this.currentStatus){
                        case "已借出书籍":return this.booksInfoDate.filter(item => item.borrow);
                        case "可借阅书籍":return this.booksInfoDate.filter(item => !item.borrow);
                        default:return this.booksInfoDate;

                    }
                }
            }
        })
        
    </script>
</body>
</html>